<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">

	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<!-- Owl Carousel  -->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">

	<!-- Flexslider  -->
	<link rel="stylesheet" href="css/flexslider.css">

	<!-- Pricing -->
	<link rel="stylesheet" href="css/pricing.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]-->
	<script src="js/respond.min.js"></script>
	<!--[endif]-->

	</head>
	<style>
		.username{
			font-weight: bold;
		}

		.logout{
			font-size: 12px;
		}

		.user-avatar{
			margin-right: 10px;
			width: 27px;
			height: 27px;
		}
	</style>
	<body>
		
	<div class="fh5co-loader"></div>
	
	<div id="page">
	<nav class="fh5co-nav" role="navigation">
		<div class="top-menu">
			<div class="container">
				<div class="row">
					<div class="col-xs-2">
						<div id="fh5co-logo"><a href="index.html"><i class="icon-study"></i>Educ<span>.</span></a></div>
					</div>
					<div class="col-xs-10 text-right menu-1">
						<ul class="navBar">
							<li class="active"><a href="index.html">首页</a></li>
							<li><a href="course/list">热门课程</a></li>
							<li class="btn-cta"><a th:href="@{/login}"><span>登录</span></a></li>
							<li class="btn-cta"><a th:href="@{/register}"><span>加入课程</span></a></li>
						</ul>
					</div>
				</div>
				
			</div>
		</div>
	</nav>

	<!--轮播图-->
	<aside id="fh5co-hero">
		<div class="flexslider">
			<ul class="slides">
		   	<li style="background-image: url(images/img_bg_1.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text">
			   				<div class="slider-text-inner">
			   					<h1>不积跬步，无以至千里。不积小流，无以成江海。</h1>
									<h2>——荀子</h2>
								<p><a class="btn btn-primary btn-lg" href="#">开始学习！</a></p>
			   				</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>
		   	<li style="background-image: url(images/img_bg_2.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text">
			   				<div class="slider-text-inner">
			   					<h1>知不足者好学，耻下问者自满。</h1>
									<h2>——林逋</h2>
								<p><a class="btn btn-primary btn-lg" href="#">开始学习！</a></p>
			   				</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>
		   	<li style="background-image: url(images/img_bg_3.jpg);">
		   		<div class="overlay-gradient"></div>
		   		<div class="container">
		   			<div class="row">
			   			<div class="col-md-8 col-md-offset-2 text-center slider-text">
			   				<div class="slider-text-inner">
			   					<h1>人的影响短暂而微弱，书的影响则广泛而深远。</h1>
									<h2>——普希金</h2>
								<p><a class="btn btn-primary btn-lg btn-learn" href="#">开始学习！</a></p>
							</div>
			   			</div>
			   		</div>
		   		</div>
		   	</li>		   	
		  	</ul>
	  	</div>
	</aside>

	<!--课程分类-->
	<div id="fh5co-course-categories">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2>课程分类</h2>
				</div>
			</div>
			<div class="row"  id="courseTypeList">
			</div>
		</div>
	</div>

	<!--精品课程-->
	<div id="fh5co-course">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center fh5co-heading">
					<h2>精品课程</h2>
				</div>
			</div>
			<div class="row" id="courseList">
			</div>
		</div>
	</div>

	<!--注册框-->
	<div id="fh5co-register" style="background-image: url(images/img_bg_2.jpg);">
		<div class="overlay"></div>
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="date-counter text-center">
					<h2>这里有最热最流行的精品课程</h2>
					<div class="simply-countdown simply-countdown-one"></div>
				</div>
			</div>
		</div>
	</div>

	<footer id="fh5co-footer" role="contentinfo" style="background-image: url(images/img_bg_4.jpg);">
		<div class="overlay"></div>
		<div class="container">
			<div class="row copyright">
				<div class="col-md-12 text-center">
					<p>
						<small class="block">Copyright &copy; 2017.Company name All rights reserved.</small>
					</p>
				</div>
			</div>

		</div>
	</footer>
	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Stellar Parallax -->
	<script src="js/jquery.stellar.min.js"></script>
	<!-- Carousel -->
	<script src="js/owl.carousel.min.js"></script>
	<!-- Flexslider -->
	<script src="js/jquery.flexslider-min.js"></script>
	<!-- countTo -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Count Down -->
	<script src="js/simplyCountdown.js"></script>
	<!-- Main -->
	<script src="js/main.js"></script>
	<script>
    var d = new Date(new Date().getTime() + 1000 * 120 * 120 * 2000);

    // default example
    simplyCountdown('.simply-countdown-one', {
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate()
    });

    //jQuery example
    $('#simply-countdown-losange').simplyCountdown({
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate(),
        enableUtc: false
    });

	//判断当前用户是否登录
	var user = JSON.parse(sessionStorage.getItem("user"));

	$(function () {
		//用户已登录，显示用户信息
		if(user != null){
			//隐藏登录注册按钮
			$(".navBar > .btn-cta").hide();
			if(user.photo == null || user.photo === ''){
				$(".navBar").append(
						'<li><a href="information"><img class="user-avatar img-circle" src="images/user-default.png"><span class="username">'+user.username+'</span></a></li>'+
						'<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
				);
			}else{
				$(".navBar").append(
						'<li><a href="information"><img class="user-avatar img-circle" src="'+user.photo+'"><span class="username">'+user.username+'</span></a></li>'+
						'<li><a href="javascript:void(0)" class="logout"><span>退出</span></a></li>'
				);
			}

		}

		//退出按钮注册监听
		$(".logout").click(function(){
			sessionStorage.removeItem("user");
			window.location.href = "/client";
		});

		//加载课程分类
		$.ajax({
			url: "http://localhost:80/api/global/coursetypes",
			success: function (result) {
				if(result.code === 0){
					var data = result.data;
					for (let i = 0; i < data.length; i++) {
						$("#courseTypeList").append(
								'<div class="col-md-3 col-sm-6 text-center ">'+
								'<div class="services">' +
								'<span class="icon"><i class="'+data[i].icon+'"></i></span>'+
								'<div class="desc">' +
								'<h3><a href="#">'+data[i].name+'</a></h3>' +
								'<p>'+data[i].description+'</p>' +
								'</div>'+
								'</div>'+
								'</div>'
						);
					}

				}
			}
		});

		//加载课程列表
		$.ajax({
			url: "http://localhost:80/api/global/courses",
			success: function (result) {
				if(result.code === 0){
					var data = result.data;
					for (let i = 0; i < data.length; i++) {
						$("#courseList").append(
								'<div class="col-md-6">' +
								'<div class="course">' +
								'<a href="#" class="course-img" style="background-image: url('+data[i].cover+');">' +
								'</a>' +
								'<div class="desc">' +
								'<h3><a href="#">'+data[i].name+'</a></h3>' +
								'<p>' +data[i].about+'</p>' +
								'<span><a href="course/detail/'+ data[i].id +'" class="btn btn-primary btn-sm btn-course">加入课程！</a></span>' +
								'</div>' +
								'</div>' +
								'</div>'
						);
					}

				}
			}
		});
	});

	</script>
	</body>
</html>

